<template>
  <div>
    <div class="videoUpload">
      <div>
        <p class="title">分享你的作品</p>
      </div>
      <progressDrop class="prog" v-if="isUpload" :current="progress"></progressDrop>
      <div>
        <label for="title">标题:</label>
        <input type="text" id="title" v-model="title" required maxlength="20" />
        <p class="warn" v-if="!title">*请输入你的作品的标题</p>
      </div>
      <div>
        <label for="way">选择你的内容:</label>
        <select id="way" v-model="way" @change="chooseWay">
          <option value="video">视频</option>
          <!-- <option value="text">专栏</option> -->
        </select>
      </div>
      <div v-if="way=='video'">
        <label for="prod">上传视频:</label>
        <input type="file" id="prod" @change="chooseVideoFile" />
        <button>点击上传视频</button>
        <span style="color:blue" v-if="ifNeedupdateVideo">非必要</span>
        <span class="fileName">{{videoName}}</span>
        <p class="warn" v-if="ifuploadVideo">*请选择你要上传的视频</p>
      </div>
      <div v-if="way=='text'">
        <label for="text">专栏:</label>
        <button @click="startWrite">点击书写专栏</button>
        <transition name="fadeScale">
          <div class="write" v-show="ifWrite">
            <!-- <mavon-editor
              v-model="text"
              ref="md"
              style="min-height: 600px"
              :codeStyle="codeStyle"
              @save="save"
              class="mavonWrite"
            />-->
          </div>
        </transition>
        <p class="warn" v-if="!(text.trim())">*请选择你要上传的专栏</p>
      </div>
      <div>
        <label for="poster">视频(专栏)封面:</label>
        <input type="file" id="poster" @change="chooseImgFile" />
        <button>点击上传封面</button>
        <span class="fileName">{{imgName}}</span>
      </div>
      <div id="box">
        <img :src="currentPoster" alt="点击上方预览图片" />
      </div>
      <div>
        <label for="introduce">简介:</label>
        <textarea name id="introduce" cols="30" rows="10" v-model="introduce" placeholder="简单介绍一下你的作品把(选填)"></textarea>
      </div>
      <button @click="uploadVideo" :disabled="(currentChoose)&&isUpload">开始上传</button>
      <button @click="cancelAddProd" :disabled="isUpload">取消</button>
    </div>
  </div>
</template>

<script>
import Bus from '../bus'
import { updateFriendState } from '../store.js'
import progressDrop from '../components/progress'
export default {
  data() {
    return {
      flag: false,
      isUpload: false,
      ifWrite: false,
      codeStyle: 'vs2015',
      title: '',
      way: 'video',
      //这里text和render反了注意
      text: '',
      render: '',
      introduce: '',
      imgName: '',
      videoName: '',
      imgUploadSrc: '',
      poster: '',
      id: 0,
      progress: 0,
      origin: 'add',
      format: ''
    }
  },
  mounted() {
    if (updateFriendState.origin === 'add') {
      this.origin = updateFriendState.origin
    } else {
      this.id = updateFriendState.id
      this.text = updateFriendState.text
      this.render = updateFriendState.render
      this.introduce = updateFriendState.introduce
      this.title = updateFriendState.title
      this.origin = updateFriendState.origin
      this.poster = updateFriendState.poster
      this.way = updateFriendState.way
    }
  },
  components: {
    progressDrop
  },
  computed: {
    ifuploadVideo() {
      return this.origin === 'add' && !this.videoName
    },
    ifNeedupdateVideo() {
      return this.origin === 'update'
    },
    currentPoster() {
      if (this.poster && !this.imgUploadSrc) {
        return this.poster
      } else if (!this.poster && this.imgUploadSrc) {
        return this.imgUploadSrc
      } else if (this.poster && this.imgUploadSrc) {
        return this.imgUploadSrc
      } else {
        return ''
      }
    },
    currentChoose() {
      if (this.origin === 'add') {
        return this.title && (this.videoName || this.text.trim()) //当前是否把必选的都选了
      } else {
        return this.title
      }
    },
    Videoinput() {
      return document.querySelector('#prod')
    },
    Imginput() {
      return document.querySelector('#poster')
    }
  },
  methods: {
    chooseWay() {
      this.text = ''
      this.videoName = ''
    },
    save(text, render) {
      console.log(render)
      this.render = render
      this.text = text
      this.ifWrite = false
    },
    startWrite() {
      this.ifWrite = true
    },
    cancelAddProd() {
      this.videoName = ''
      this.$emit('cancelAddProd')
    },
    chooseVideoFile() {
      if (this.Videoinput && this.Videoinput.files[0]) {
        if (this.Videoinput.files[0].size / 1024 / 1024 > 500) {
          alert('视频大小不能超过500M')
          Bus.$emit('finishChange', 'error')
          return false
        }
        let aa = this.Videoinput.files[0].name.split('.')
        if (aa[aa.length - 1] == 'wav' || aa[aa.length - 1] == 'mp3' || aa[aa.length - 1] == 'mp4' || aa[aa.length - 1] == 'm4a') {
          this.format = aa[aa.length - 1]
          this.videoName = this.Videoinput.files[0].name
        } else {
          alert('只允许wav,mp3,mp4,m4a格式的视频或音频')
          Bus.$emit('finishChange', 'error')
          return false
        }
      }
    },
    chooseImgFile() {
      if (this.Imginput.files[0]) {
        if (this.Imginput.files[0].size / 1024 > 500) {
          alert('图片大小不能超过500k')
          Bus.$emit('finishChange', 'error')
          return false
        }
        let aa = this.Imginput.files[0].name.split('.')
        console.log(aa)
        if (aa[aa.length - 1] == 'jpg' || aa[aa.length - 1] == 'webp' || aa[aa.length - 1] == 'png' || aa[aa.length - 1] == 'jpeg') {
          this.imgName = this.Imginput.files[0].name
          console.log(this.Imginput.files[0])

          let url = window.webkitURL || window.URL
          let imgfileurl = url.createObjectURL(this.Imginput.files[0])
          this.imgUploadSrc = imgfileurl
        } else {
          alert('只允许jpg,jepg,png,bmp格式的图片')
          Bus.$emit('finishChange', 'error')
          return false
        }
      }
    },
    uploadVideo() {
      this.flag = true
      if (this.flag) {
        const data = new FormData()
        data.append('username', this.$store.getters.user.username)
        data.append('title', this.title)
        data.append('origin', this.origin)
        data.append('way', this.way)
        data.append('mp4file', this.Imginput.files[0])
        data.append('status', this.$store.getters.user.status)
        if (this.origin === 'update') {
          data.append('id', this.id)
        }
        if (this.Videoinput && this.Videoinput.files[0]) {
          data.append('format', this.format)
          data.append('mp4file', this.Videoinput.files[0])
        }
        if (this.introduce !== '') {
          data.append('introduce', this.introduce)
        }
        if (this.text !== '') {
          data.append('format', 'txt')
          data.append('text', this.render)
          data.append('render', this.text)
        }
        let currentVue = this
        this.isUpload = true
        this.$axios
          .post('/upload/upMp4', data, {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            onUploadProgress(progressEvent) {
              if (progressEvent.lengthComputable) {
                let val = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0)
                // that.formData.showProgress = true;
                console.log(currentVue.progress)

                currentVue.progress = parseInt(val) - 1
              }
            }
          })
          .then(res => {
            console.log(res)
            if (res.data.error === -1) {
              this.videoName = ''
              // this.clearFile()
              this.$emit('getVideoList')
              this.$emit('successMsg')
              this.cancelAddProd()
            } else {
              this.$emit('errorMsg')
            }
          })
          .finally(() => {
            this.ifUpload = false
            this.flag = false
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../css/comment/animate.css');

.videoUpload {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 999999;
  width: 40%;
  background-color: #fff;
  padding: 20px 28px;
  border-radius: 20px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  box-shadow: 0 0 11px 0px #000;
  .prog {
    top: 0;
    right: 0;
  }
  #box {
    width: 250px;
    height: 100px;
    border: 1px solid #e5e5e5;
    img {
      width: 100%;
      height: 100%;
    }
  }
  div {
    position: relative;
    margin: 18px 15px;
    .warn {
      color: red;
      font-size: 13px;
      letter-spacing: 2px;
      position: absolute;
    }
    .title {
      text-align: center;
      font-size: 23px;
      margin: 10px 25px;
    }
    .write {
      height: 500px;
      position: absolute;
      top: -220px;
      width: 150%;
      left: -30%;
      // overflow: scroll;
      .mavonWrite {
        height: 50%;
      }
    }

    select {
      padding-left: 15px;
      width: 30%;
      height: 30px;
      margin-left: 15px;
    }
    input {
      padding: 5px 10px;
      border: 1px solid #dddddd;
      width: 50%;
      height: 20px;
      margin-left: 15px;
      transition: all 0.4s;
      &:focus {
        box-shadow: 0 0 5px 0px #91beff;
      }
    }
    input[type='file'] {
      width: 150px;
      opacity: 0;
      position: absolute;
      top: 0;
    }
    textarea {
      resize: none;
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding: 15px;
      // margin: 5px 28px;
      transition: all 0.4s;
      &:focus {
        box-shadow: 0 0 5px 0px #91beff;
      }
    }
    button {
      padding: 0 15px;
      width: 150px;
      height: 30px;
      border: none;
      background-color: #ddd;
      margin-left: 15px;
      outline: none;
    }
  }
  button {
    border: 2px solid black;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    transition: all 0.4s;
    margin: 0 5%;
    &:hover {
      border: 2px solid #e4efff;
      background-color: #e4efff;
      color: #000;
    }
  }
}
@media screen and (max-width: 765px) {
  .videoUpload {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 99999;
    width: 90%;
    background-color: #fff;
    padding: 20px 5px;
    border-radius: 20px;
    margin: 0 auto;
    font-size: 17px;
    font-weight: 100;
    box-shadow: 0 0 11px 0px #000;
    div {
      .write {
        height: 500px;
        position: absolute;
        top: -170px;
        width: 100%;
        left: 0;
        margin: 0;
        // overflow: scroll;
        .mavonWrite {
          height: 50%;
          margin: 0;
        }
      }
    }
  }
}
</style>